<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<style>
    #app{
        overflow-x: auto;
        margin: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    .video-item{
        margin: 20px;
    }
    .page-list{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .btn{
        width: 90px;
        height: 30px;
        background: #ffffff;
        border: 1px #ccc solid;
        border-radius: 5px;
        margin-left: 10px;
        margin-right: 10px;
    }
</style>
<body>

<div id="app">
    <div class="video-item" v-for="item of videoList">
        <video width="320" height="240" controls :src="item"></video>
    </div>
    <div class="page-list">
        <p>当前页:{{currentPage}}</p>
        <button class="btn" @click="prevPage" v-bind:disabled="prevDis">上一页</button>
        <button class="btn" @click="nextPage" v-bind:disabled="nextDis">下一页</button>
        <p>总页数:{{totalPage}}</p>
        <input type="text" v-model="goPage" style="width:40px" >
        <button class="btn" @click="goPageBtn">跳转</button>
    </div>
</div>
<script type="text/javascript" src="js/urlData.js" ></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            prevDis: true,
            nextDis: false,
            total: dataLen(),
            totalPage: 0,
            videoList: [],
            currentPage: 1,
            pageSize : 4,
            goPage: 1
        },
        mounted:function () {
            this.$nextTick(function () {
                this.totalPage = Math.floor(dataLen() / this.pageSize);
                this.videoList = getList(0, 4)
            })
        },
        filters: {
        },
        methods: {
            goPageBtn: function(){
                this.currentPage = this.goPage;
                this.getDataList(this.goPage);
            },
            prevPage: function() {
                this.currentPage = this.currentPage - 1;
                this.getDataList(this.currentPage);
                if(this.currentPage === 1){
                    this.prevDis = true;
                }
                if(this.nextDis){
                    this.nextDis = false;
                }
            },
            nextPage: function () {
                if(this.currentPage === this.totalPage){
                    this.nextDis = true;
                }
                this.currentPage = this.currentPage + 1;
                this.getDataList(this.currentPage);
                if(this.prevDis){
                    this.prevDis = false;
                }
            },

            getDataList: function(currentPage) {
                var offset = (currentPage - 1) * this.pageSize;
                this.videoList = getList(offset, this.pageSize);
            }

        }
    });
</script>

</body>
</html>